<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .numberInput{width:100px;display: flex;}
        .numberInput span{width:20px;height:20px;border:solid 1px black;line-height:20px;font-size:14px;text-align: center;flex-shrink:0;}
    </style>
</head>
<body>
    <input type="number" step="2" min="0" max="10">
    <div class="numberInput">
        <span class="diff">-</span>
        <input type="text" id="txt">
        <span class="add">+</span>
    </div>
</body>
<script>
    
    
    numberInput({
        step:4,
        min:2,
        max:10
    })
    
    // 因为参数的无序，所以，以对象的形式传参
    function numberInput(obj){
        // 处理默认参数
        var step = obj.step || 1;
        var min = obj.min || 0;
        var max = obj.max || 100;

        // 获取元素（改成创建元素）
        var diff = document.querySelector(".numberInput .diff");
        var add = document.querySelector(".numberInput .add");
        var txt = document.querySelector(".numberInput #txt");

        // 设置默认值为最小值
        var num = min;
        txt.value = num;
        // 减功能
        diff.onclick = function(){
            // 减计算
            num -= step;
            // 判断是否到最小值
            if(num <= min){
                num = min
            }
            txt.value = num;
        }
        // 加功能
        add.onclick = function(){
            // 加计算
            num += step;
            // 判断是否到最大值
            if(num >= max){
                num = max;
            }
            txt.value = num;
        }
    }
</script>
</html>